<template>
	<view class="mian">
		<scroll-view @scrolltolower="scrolltolower" class="scroll-view_list" scroll-y="true">
			<view class="mian_content">
				<view class="fault_list" v-if="faultList.length>0">
					<view class="coll_li" v-for="(item,index) in faultList" :key="index" @click="getFaultItem(item)">
						<view class="text_name">
							<span>{{item.name}}</span><span class="red_num"
								v-if="getTypeNum(item)">{{getTypeNum(item)}}</span>
						</view>
						<uni-icons type="right"></uni-icons>
					</view>

				</view>
				<view v-else class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">暂无故障类型</view>
				</view>
				<!-- <view class="btn_word">
			<button type="primary" class="btn_bor" @click="onConfirm">确认</button>
		</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad, onUnload
	} from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	import apiFault from '@/util/api/fault.js'
	const faultList = ref([])//列表
	const totle = ref(0)//总条数
	const page = ref(1)
	const valueIdCode = ref()
	onLoad((e) => {
		valueIdCode.value = e.value
		getMobileFaultList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 获取列表
	const getMobileFaultList = async () => {
		let data = {
			"limit": 50,
			"page": page.value
		}
		await apiFault.getUserMobileFaultList(data).then(res => {
			if (res.code == 20000) {
				totle.value = res.data.total
				faultList.value = [...faultList.value, ...res.data.rows]
			}
		})
	}
	const getFaultItem = (item) => {
		store.commit('setchackFaultItem', item)
		uni.navigateTo({
			url: '/pages_user/home/fault/fault?id=' + item.id + '&value=' + valueIdCode.value
		})
	}
	//获取已经选择的类型数量
	const getTypeNum = (item) => {
		for (let i of store.state.checkedFaultList) {
			if (item.id == i.typeId) {
				return i.list.length
			}
		}
	}
	// 加载更多
	const scrolltolower = () => {
		if (totle.value > faultList.value.length) {
			page.value += 1
			getMobileFaultList()
		}
	}
</script>

<style lang="scss" scoped>
	.void_goods {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 60vh;

		.img {
			width: 60%;
			height: 250rpx;
		}

		.tip {
			color: #aaa;
			font-size: 28rpx;
		}
	}

	.mian {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.scroll-view_list {
			height: 100%;
			flex: 1;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.mian_content {
				padding-bottom: 200rpx;
			}
		}
	}

	.fault_list {
		padding: 40rpx 40rpx;

		.coll_li {
			padding: 40rpx 20rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text_name {
				position: relative;

				.red_num {
					background-color: #FF5733;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: absolute;
					text-align: center;
					border-radius: 50%;
					color: #fff;
					top: -10rpx;
					margin-left: 10rpx;
					font-size: 22rpx;
					transform: scale(.9);
				}
			}

		}
	}

	.btn_word {
		padding: 50rpx 40rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		z-index: 2;

		:deep(button:after) {
			border: none !important;
		}

		.btn_bor {
			font-size: 32rpx;
			border-radius: 50rpx;
			background-color: #007cff;
		}
	}
</style>